<template>
  <div>
    <md-table v-model="users" :table-header-color="tableHeaderColor">
      <md-table-row slot="md-table-row" slot-scope="{ item }">
        <md-table-cell md-label="序号">{{ item.id }}</md-table-cell>
        <md-table-cell md-label="主机名称">{{ item.hostname }}</md-table-cell>
        <md-table-cell md-label="接口">{{ item.hostinterface }}</md-table-cell>
        <md-table-cell md-label="CPU利用率">{{ item.CPU_utilization }}</md-table-cell>
        <md-table-cell md-label="内存利用率">{{ item.Memory_utilization }}</md-table-cell>
      </md-table-row>
    </md-table>
  </div>
</template>

<script>
  import Axios from 'axios'
  export default {
  name: "ordered-table",
  props: {
    tableHeaderColor: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      selected: [],
      users: []
    };
  },

  mounted() {
    this.getHighLoad();
  },

  methods: {
    getHighLoad(){
      Axios.post('/dashboard/get_high_load_host_list.action', {
        name: 'CPU utilization'
      }).then( res => {
        for (let i in res.data.content.result ){
          res.data.content.result[i]["id"] = parseInt(i) + 1;
        }
        this.users = res.data.content.result;
      })
    }
  }
};
</script>
